<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <video id="remoteVideo"></video>
        <video id="localVideo"></video>
        <button id="btn">test</button>
    </div>
    <!-- <script src="./src/js/webrtc.js"></script> -->
    <script>
        const pc1 = new RTCPeerConnection();
        pc1.addEventListener('icecandidate', async (e) => {
            if (e.candidate) {
                await pc2.addIceCandidate(e.candidate);
            }
        });
        pc1.addEventListener('iceconnectionstatechange', (e) => {
            console.log('pc1: iceconnectionstatechange', e);
        });


        const pc2 = new RTCPeerConnection();
        pc2.addEventListener('icecandidate', async (e) => {
            if (e.candidate) {
                await pc1.addIceCandidate(e.candidate);
            }
        });


        pc2.addEventListener('iceconnectionstatechange', (e) => {
            console.log('pc2: iceconnectionstatechange', e);
        });


        pc2.addEventListener('track', (e) => {
            if (e.streams.length > 0) {
                remoteVideo.srcObject = e.streams[0];
            }
        });


        const remoteVideo = document.querySelector('#remoteVideo');
        const showVideoBtn = document.querySelector('#btn');


        async function pushStream(answer) {
            pc1.setRemoteDescription(answer);
        }

        async function pullStream(offer) {
            pc2.setRemoteDescription(offer);
            const answer = await pc2.createAnswer();
            pc2.setLocalDescription(answer);
            console.warn('answer', answer);
            pushStream(answer);
        }
        var  localStream;

        window.onload = async () => {
            localStream= await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true,
            });

            const localVideo = document.querySelector('#localVideo');
            localVideo.srcObject = localStream;
            localStream.getTracks().forEach((track) => pc1.addTrack(track, localStream));


            const offer = await pc1.createOffer();
            pc1.setLocalDescription(offer);
            console.warn('pc1 offer', offer);
            pullStream(offer);
        };
        showVideoBtn.addEventListener('click',()=>{
            console.log(localStream)
            localVideo.srcObject = localStream;
        })
    </script>
</body>

</html>